<template>
    <div class="online-course">
        <template v-if="list.length > 0">
        <div class="single-warpper" v-for="(item,index) in list" :key="index" @click="goDetail(item.itmId, item.isStartTraining)">
            <van-image
            width="114"
            height="70"
            :src="appUrl + item.itmIcon"
            />
            <div class="right-box">
                <div class="info">
                    <p class="title">{{item.itmTitle}}</p>
                    <div class="progress">
                        <!-- <span style="margin-right:10px">{{$t('credit_hours')}}：</span> -->
                        <van-progress :percentage="item.progress" color="#70B603" :show-pivot="false" track-color="#F2F2F2"/>
                        <span>{{item.progress}}%</span>
                    </div>
                </div>
                <van-icon name="arrow" color="#7f7f7f" size="18"/>
            </div>
        </div>
        </template>
        <div v-else class="box-table white-bg" style="width:100%;height: 300px;">
            <div class="box-table-cell" style="text-align: center;">
                <div class="no-data">
                    <img src="../../../static/images/no-data.png" alt=""/>
                    <p class="color999">{{ $t("no_data") }}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
    props: ['pageNo'],
    // components: {faceModal},
    data() {
        return {
            visibleModal: false,
            page: 1,
            list: [],
            itmId: ''
        };
    },
    methods: {
        /**
         * 获取课程列表 */
        getList(option) {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/online/childrenCourse`,
                params: {
                    itmId: this.$route.params.itmId,
                    pageNo: this.page,
                    pageSize: 999
                }
            }).then((res) => {
                if (option && option === 'refresh') {
                    this.list = res.data.results;
                } else {
                    this.list = this.list.concat(res.data.results);
                }
                this.list = res.data.results;
                // 父组件开启滚动加载需求
                this.$emit('getOnFetching', this.list.length < res.data.totalRecord);
            });
        },
        goDetail(itmId, isStudy) {
            if (!isStudy) {
                Toast.fail(this.$t('study_time_frame'));
                return false;
            }
            this.itmId = itmId;
            // let studyFaceInd = JSON.parse(this.$route.query.studyFaceInd);
            // if (studyFaceInd) {
            //     this.visibleModal = true;
            // } else {
            // this.$router.push({path: `/certifiedCourse/detail/${itmId}/0`, query: {fId: this.$route.params.itmId, studyFaceInd: this.$route.query.studyFaceInd}});
            this.$router.push({path: `/certifiedCourse/detail/${itmId}/0`, query: {fId: this.$route.params.itmId}});
            // }
        }
    },
    mounted() {
        this.getList('refresh');
    },
    watch: {
        pageNo(val) {
            this.page = val;
            this.getList(val === 1 ? null : 'refresh');
        }
    }
};
</script>
<style lang="less" scoped>
.online-course{
    background: #fff;
    margin-top: 10px;
    padding: 15px;
    .single-warpper{
        display: flex;
        margin-bottom: 15px;
        .right-box{
            flex:1;
            display: flex;
            align-items: center;
            margin-left: 10px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
            .info{
                height: 100%;
                flex: 1;
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                margin-right: 10px;
                .title{
                    word-break: break-all;
                    height: 30px;
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .progress{
                    margin-top: 15px;
                    display: flex;
                    align-items: center;
                    >span{
                        font-size: 12px;
                    }
                    /deep/.van-progress{
                        width: 50%;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}
</style>
